<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <title>已办任务</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        body > .el-container {
            height: 100%
        }

        .menu {
            height: 100%;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-radio-group {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            font-size: 0;
        }

        html, body, #app {

            /*统一设置高度为100%*/
            height: 100% !important;
        }


        .index {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .el-container {
            width: 100%;
            min-height: 100vh !important;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .el-main {
            height: 100%;
            overflow: hidden;
        }

        .el-footer {
            display: flex;
            height: 4vh;
            width: 100%;
            align-items: center !important;
            text-align: center;
            justify-content: center;
        }

        .el-pagination {
            text-align: center !important;
        }

    </style>
</head>
<body>
<div id="app" class="index">
    <el-container direction="vertical" style="margin: 0px !important;height: 100vh">
        <el-header height="initial" style="background: #fff;">
            <el-row align="middle" type="flex" style="background: #fff; ">
                <el-col :span="24">
                    <el-form label-position="right" :inline="true" style="padding-top: 10px; //内边距" :model="roleSearch"
                             class="demo-form-inline" size="mini">
                        <el-form-item label="污染源名称">
                            <el-input v-model="roleSearch.psName" placeholder="污染源名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="监控点名称">
                            <el-input v-model="roleSearch.pointName" placeholder="监控点名称" clearable></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="loadTable();">查询</el-button>
                            <el-button type="warning" icon="el-icon-printer" @click="exportExcel()">导出</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-header>
        <main style="background-color: white;height: calc(100vh - 110px)  !important;">
            <template>
                <el-table
                        stripe
                        height="100%"
                        :data="tableData"
                        border
                        size="small"
                        :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
                        style="width: 100%;font-size: 12px">
                    <el-table-column type="index" width="50">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{rows * (currentPage - 1) + (scope.$index + 1)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <!--<el-table-column prop="reason"  label="原因">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flag == 0">否</span>
                            <span v-if="scope.row.flag == 1">是</span>
                        </template>
                    </el-table-column>-->
                    <el-table-column prop="reason" label="原因"></el-table-column>
                    <el-table-column prop="taskName" label="已办任务名称"></el-table-column>
                    <el-table-column
                            label="开始时间"
                            prop="startTime">
                    </el-table-column>
                    <el-table-column
                            label="结束时间"
                            prop="endTime">
                    </el-table-column>
                    <el-table-column
                            label="请假时长"
                            :formatter="calculate">
                    </el-table-column>

                  <!--  <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    size="mini"
                                    @click="openWin(scope.$index, scope.row)">绑定菜单
                            </el-button>
                            <el-button
                                    type="success"
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>-->
                </el-table>

            </template>
        </main>
        <el-footer style="background: #fff !important;">
            <!--分页-->

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[50, 100, 200, 400]"
                    :page-size="rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-footer>
    </el-container>

    <el-dialog
            title="角色菜单绑定" :visible.sync="dialogVisible" width="90%" top="50px" :before-close="handleClose">
        <iframe id="toRoleMenu" scrolling="yes" width='100%' height="580px" :src="iframeSrc" frameborder='0'
                seamless></iframe>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
</div>
</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script language='javascript' th:inline="javascript">
    let id = 1000;
    new Vue({
        el: '#app',
        data: function () {
            const data = [];
            return {
                iframeSrc: '',
                dialogVisible: false, //弹出框
                roleSearch: {},
                tableData: [],
                currentPage: 1,
                search: '',
                rows: 50,
                total: 0,
            }
        },
        created() {
            this.init()
        },
        methods: {
            onSubmit() {
                // console.log('----')
                // var a =  document.getElementById('toRoleMenu').contentWindow;
                //调用子页面的方法.
                var a = $("#toRoleMenu")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
                a.hehe();  //调用子页面中的subFunction方法。

                // console.log('a',a)
            },
            handleClose() {
                this.dialogVisible = false;
            },
            openWin(index, row) {
                // console.log(row.id)
                // $(c).attr("src","/role/toRoleMenuBind/"+row.id);
                this.iframeSrc = "/role/toRoleMenuBind/" + row.id
                this.dialogVisible = true;
            },
            handleSizeChange(val) {
                // console.log('val',val); //当前显示行数
                this.rows = val
                this.init()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
                this.init()
            },
            init() {
                _this = this
                $.get("/getDoneTaskData/" + this.currentPage + "/" + this.rows, {}, function (msg) {
                    _this.tableData = msg.data.list
                    _this.total = msg.data.total
                    // _this.data = msg.data
                })
            },
            calculate(val) {
                var startTime = Date.parse(val.startTime);
                var endTime = Date.parse(val.endTime);
                return this.formatTotalDateSub((endTime - startTime)/1000);
            },
            /**
             * 计算出相差天数
             * @param secondSub
             */
            formatTotalDateSub(secondSub) {
                var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
                var leave1 = secondSub % (24 * 3600);                // 计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
                var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
                var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3);
                return days + " 天 " + hours + " 时 " + minutes + " 分 " + seconds + ' 秒';
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                _this = this
                // console.log('删除',index, row);
                axios({
                    url: "/role/delRole/" + row.id,
                    data: '',
                    method: 'post',
                    contentType: "application/json",
                }).then(res => {
                    var type = res.data.code == 20000 ? 'success' : 'error'
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: type
                    });
                    _this.init()
                })
            },
            loadTable() {
            },
            exportExcel() {
            }
        }
    })
</script>

</html>